<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3757583" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6e4;</span>
                <div class="name">warning</div>
                <div class="code-name">&amp;#xe6e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6e5;</span>
                <div class="name">zoom-in</div>
                <div class="code-name">&amp;#xe6e5;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6e6;</span>
                <div class="name">zoom-out</div>
                <div class="code-name">&amp;#xe6e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6e7;</span>
                <div class="name">add-bold</div>
                <div class="code-name">&amp;#xe6e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6e8;</span>
                <div class="name">arrow-left-bold</div>
                <div class="code-name">&amp;#xe6e8;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6e9;</span>
                <div class="name">arrow-up-bold</div>
                <div class="code-name">&amp;#xe6e9;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6ea;</span>
                <div class="name">close-bold</div>
                <div class="code-name">&amp;#xe6ea;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6eb;</span>
                <div class="name">arrow-down-bold</div>
                <div class="code-name">&amp;#xe6eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6ec;</span>
                <div class="name">minus-bold</div>
                <div class="code-name">&amp;#xe6ec;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6ed;</span>
                <div class="name">arrow-right-bold</div>
                <div class="code-name">&amp;#xe6ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6ee;</span>
                <div class="name">select-bold</div>
                <div class="code-name">&amp;#xe6ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6ef;</span>
                <div class="name">arrow-up-filling</div>
                <div class="code-name">&amp;#xe6ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6f0;</span>
                <div class="name">arrow-down-filling</div>
                <div class="code-name">&amp;#xe6f0;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6f1;</span>
                <div class="name">arrow-left-filling</div>
                <div class="code-name">&amp;#xe6f1;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6f2;</span>
                <div class="name">arrow-right-filling</div>
                <div class="code-name">&amp;#xe6f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6f3;</span>
                <div class="name">caps-unlock-filling</div>
                <div class="code-name">&amp;#xe6f3;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6f4;</span>
                <div class="name">comment-filling</div>
                <div class="code-name">&amp;#xe6f4;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6f5;</span>
                <div class="name">check-item-filling</div>
                <div class="code-name">&amp;#xe6f5;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6f6;</span>
                <div class="name">clock-filling</div>
                <div class="code-name">&amp;#xe6f6;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6f7;</span>
                <div class="name">delete-filling</div>
                <div class="code-name">&amp;#xe6f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6f8;</span>
                <div class="name">decline-filling</div>
                <div class="code-name">&amp;#xe6f8;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6f9;</span>
                <div class="name">dynamic-filling</div>
                <div class="code-name">&amp;#xe6f9;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6fa;</span>
                <div class="name">intermediate-filling</div>
                <div class="code-name">&amp;#xe6fa;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6fb;</span>
                <div class="name">favorite-filling</div>
                <div class="code-name">&amp;#xe6fb;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6fc;</span>
                <div class="name">layout-filling</div>
                <div class="code-name">&amp;#xe6fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6fd;</span>
                <div class="name">help-filling</div>
                <div class="code-name">&amp;#xe6fd;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6fe;</span>
                <div class="name">history-filling</div>
                <div class="code-name">&amp;#xe6fe;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6ff;</span>
                <div class="name">filter-filling</div>
                <div class="code-name">&amp;#xe6ff;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe700;</span>
                <div class="name">file-common-filling</div>
                <div class="code-name">&amp;#xe700;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe701;</span>
                <div class="name">news-filling</div>
                <div class="code-name">&amp;#xe701;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe702;</span>
                <div class="name">edit-filling</div>
                <div class="code-name">&amp;#xe702;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe703;</span>
                <div class="name">fullscreen-expand-filling</div>
                <div class="code-name">&amp;#xe703;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe704;</span>
                <div class="name">smile-filling</div>
                <div class="code-name">&amp;#xe704;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe705;</span>
                <div class="name">rise-filling</div>
                <div class="code-name">&amp;#xe705;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe706;</span>
                <div class="name">picture-filling</div>
                <div class="code-name">&amp;#xe706;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe707;</span>
                <div class="name">notification-filling</div>
                <div class="code-name">&amp;#xe707;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe708;</span>
                <div class="name">user-filling</div>
                <div class="code-name">&amp;#xe708;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe709;</span>
                <div class="name">setting-filling</div>
                <div class="code-name">&amp;#xe709;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe70a;</span>
                <div class="name">switch-filling</div>
                <div class="code-name">&amp;#xe70a;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe70b;</span>
                <div class="name">work-filling</div>
                <div class="code-name">&amp;#xe70b;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe70c;</span>
                <div class="name">task-filling</div>
                <div class="code-name">&amp;#xe70c;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe70d;</span>
                <div class="name">success-filling</div>
                <div class="code-name">&amp;#xe70d;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe70e;</span>
                <div class="name">warning-filling</div>
                <div class="code-name">&amp;#xe70e;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe70f;</span>
                <div class="name">folder-filling</div>
                <div class="code-name">&amp;#xe70f;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe710;</span>
                <div class="name">map-filling</div>
                <div class="code-name">&amp;#xe710;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe711;</span>
                <div class="name">prompt-filling</div>
                <div class="code-name">&amp;#xe711;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe712;</span>
                <div class="name">meh-filling</div>
                <div class="code-name">&amp;#xe712;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe713;</span>
                <div class="name">cry-filling</div>
                <div class="code-name">&amp;#xe713;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe714;</span>
                <div class="name">top-filling</div>
                <div class="code-name">&amp;#xe714;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe715;</span>
                <div class="name">home-filling</div>
                <div class="code-name">&amp;#xe715;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe716;</span>
                <div class="name">sorting</div>
                <div class="code-name">&amp;#xe716;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe621;</span>
                <div class="name">华为</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe622;</span>
                <div class="name">vivo</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe623;</span>
                <div class="name">小米</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe945;</span>
                <div class="name">apple</div>
                <div class="code-name">&amp;#xe945;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe946;</span>
                <div class="name">Android</div>
                <div class="code-name">&amp;#xe946;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe947;</span>
                <div class="name">Microsoft</div>
                <div class="code-name">&amp;#xe947;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe94e;</span>
                <div class="name">Google</div>
                <div class="code-name">&amp;#xe94e;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe950;</span>
                <div class="name">GooglePlay</div>
                <div class="code-name">&amp;#xe950;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe951;</span>
                <div class="name">Safari</div>
                <div class="code-name">&amp;#xe951;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe717;</span>
                <div class="name">微信</div>
                <div class="code-name">&amp;#xe717;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe718;</span>
                <div class="name">QQ空间</div>
                <div class="code-name">&amp;#xe718;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe719;</span>
                <div class="name">微博</div>
                <div class="code-name">&amp;#xe719;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe71a;</span>
                <div class="name">朋友圈</div>
                <div class="code-name">&amp;#xe71a;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe71b;</span>
                <div class="name">QQ</div>
                <div class="code-name">&amp;#xe71b;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe71c;</span>
                <div class="name">微信支付</div>
                <div class="code-name">&amp;#xe71c;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe71d;</span>
                <div class="name">支付宝</div>
                <div class="code-name">&amp;#xe71d;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe71e;</span>
                <div class="name">Apple pay</div>
                <div class="code-name">&amp;#xe71e;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe71f;</span>
                <div class="name">paypal</div>
                <div class="code-name">&amp;#xe71f;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe720;</span>
                <div class="name">银联</div>
                <div class="code-name">&amp;#xe720;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe721;</span>
                <div class="name">云闪付</div>
                <div class="code-name">&amp;#xe721;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe722;</span>
                <div class="name">Facebook</div>
                <div class="code-name">&amp;#xe722;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe723;</span>
                <div class="name">tumblr</div>
                <div class="code-name">&amp;#xe723;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe724;</span>
                <div class="name">twitter</div>
                <div class="code-name">&amp;#xe724;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe726;</span>
                <div class="name">linkedin</div>
                <div class="code-name">&amp;#xe726;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe727;</span>
                <div class="name">skype</div>
                <div class="code-name">&amp;#xe727;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe728;</span>
                <div class="name">line</div>
                <div class="code-name">&amp;#xe728;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe729;</span>
                <div class="name">Pinterest</div>
                <div class="code-name">&amp;#xe729;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe72a;</span>
                <div class="name">github</div>
                <div class="code-name">&amp;#xe72a;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe72b;</span>
                <div class="name">钉钉</div>
                <div class="code-name">&amp;#xe72b;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe72c;</span>
                <div class="name">Face ID</div>
                <div class="code-name">&amp;#xe72c;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe72d;</span>
                <div class="name">Touch ID</div>
                <div class="code-name">&amp;#xe72d;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe664;</span>
                <div class="name">column-4</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe665;</span>
                <div class="name">add</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe666;</span>
                <div class="name">add-circle</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe667;</span>
                <div class="name">adjust</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe668;</span>
                <div class="name">arrow-up-circle</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe669;</span>
                <div class="name">arrow-right-circle</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe66a;</span>
                <div class="name">arrow-down</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe66b;</span>
                <div class="name">ashbin</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe66c;</span>
                <div class="name">arrow-right</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe66d;</span>
                <div class="name">browse</div>
                <div class="code-name">&amp;#xe66d;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe66e;</span>
                <div class="name">bottom</div>
                <div class="code-name">&amp;#xe66e;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe66f;</span>
                <div class="name">back</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe670;</span>
                <div class="name">bad</div>
                <div class="code-name">&amp;#xe670;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe671;</span>
                <div class="name">arrow-double-left</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe672;</span>
                <div class="name">arrow-left-circle</div>
                <div class="code-name">&amp;#xe672;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe673;</span>
                <div class="name">arrow-double-right</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe674;</span>
                <div class="name">caps-lock</div>
                <div class="code-name">&amp;#xe674;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe675;</span>
                <div class="name">camera</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe676;</span>
                <div class="name">chart-bar</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe677;</span>
                <div class="name">attachment</div>
                <div class="code-name">&amp;#xe677;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe678;</span>
                <div class="name">code</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe679;</span>
                <div class="name">close</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe67a;</span>
                <div class="name">check-item</div>
                <div class="code-name">&amp;#xe67a;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe67b;</span>
                <div class="name">calendar</div>
                <div class="code-name">&amp;#xe67b;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe67c;</span>
                <div class="name">comment</div>
                <div class="code-name">&amp;#xe67c;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe67d;</span>
                <div class="name">column-vertical</div>
                <div class="code-name">&amp;#xe67d;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe67e;</span>
                <div class="name">column-horizontal</div>
                <div class="code-name">&amp;#xe67e;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe67f;</span>
                <div class="name">complete</div>
                <div class="code-name">&amp;#xe67f;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe680;</span>
                <div class="name">chart-pie</div>
                <div class="code-name">&amp;#xe680;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe681;</span>
                <div class="name">cry</div>
                <div class="code-name">&amp;#xe681;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe682;</span>
                <div class="name">customer-service</div>
                <div class="code-name">&amp;#xe682;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe683;</span>
                <div class="name">delete</div>
                <div class="code-name">&amp;#xe683;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe684;</span>
                <div class="name">direction-down</div>
                <div class="code-name">&amp;#xe684;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe685;</span>
                <div class="name">copy</div>
                <div class="code-name">&amp;#xe685;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe686;</span>
                <div class="name">cut</div>
                <div class="code-name">&amp;#xe686;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe687;</span>
                <div class="name">data-view</div>
                <div class="code-name">&amp;#xe687;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe688;</span>
                <div class="name">direction-down-circle</div>
                <div class="code-name">&amp;#xe688;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe689;</span>
                <div class="name">direction-right</div>
                <div class="code-name">&amp;#xe689;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe68a;</span>
                <div class="name">direction-up</div>
                <div class="code-name">&amp;#xe68a;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe68b;</span>
                <div class="name">discount</div>
                <div class="code-name">&amp;#xe68b;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe68c;</span>
                <div class="name">direction-left</div>
                <div class="code-name">&amp;#xe68c;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe68d;</span>
                <div class="name">download</div>
                <div class="code-name">&amp;#xe68d;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe68e;</span>
                <div class="name">electronics</div>
                <div class="code-name">&amp;#xe68e;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe68f;</span>
                <div class="name">drag</div>
                <div class="code-name">&amp;#xe68f;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe690;</span>
                <div class="name">elipsis</div>
                <div class="code-name">&amp;#xe690;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe691;</span>
                <div class="name">export</div>
                <div class="code-name">&amp;#xe691;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe692;</span>
                <div class="name">explain</div>
                <div class="code-name">&amp;#xe692;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe693;</span>
                <div class="name">edit</div>
                <div class="code-name">&amp;#xe693;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe694;</span>
                <div class="name">eye-close</div>
                <div class="code-name">&amp;#xe694;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe695;</span>
                <div class="name">email</div>
                <div class="code-name">&amp;#xe695;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe696;</span>
                <div class="name">error</div>
                <div class="code-name">&amp;#xe696;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe697;</span>
                <div class="name">favorite</div>
                <div class="code-name">&amp;#xe697;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe698;</span>
                <div class="name">file-common</div>
                <div class="code-name">&amp;#xe698;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe699;</span>
                <div class="name">file-delete</div>
                <div class="code-name">&amp;#xe699;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe69a;</span>
                <div class="name">file-add</div>
                <div class="code-name">&amp;#xe69a;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe69b;</span>
                <div class="name">film</div>
                <div class="code-name">&amp;#xe69b;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe69c;</span>
                <div class="name">fabulous</div>
                <div class="code-name">&amp;#xe69c;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe69d;</span>
                <div class="name">file</div>
                <div class="code-name">&amp;#xe69d;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe69e;</span>
                <div class="name">folder-close</div>
                <div class="code-name">&amp;#xe69e;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe69f;</span>
                <div class="name">filter</div>
                <div class="code-name">&amp;#xe69f;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6a0;</span>
                <div class="name">good</div>
                <div class="code-name">&amp;#xe6a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6a1;</span>
                <div class="name">hide</div>
                <div class="code-name">&amp;#xe6a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6a2;</span>
                <div class="name">home</div>
                <div class="code-name">&amp;#xe6a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6a3;</span>
                <div class="name">history</div>
                <div class="code-name">&amp;#xe6a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6a4;</span>
                <div class="name">file-open</div>
                <div class="code-name">&amp;#xe6a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6a5;</span>
                <div class="name">forward</div>
                <div class="code-name">&amp;#xe6a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6a6;</span>
                <div class="name">import</div>
                <div class="code-name">&amp;#xe6a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6a7;</span>
                <div class="name">image-text</div>
                <div class="code-name">&amp;#xe6a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6a8;</span>
                <div class="name">keyboard-26</div>
                <div class="code-name">&amp;#xe6a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6a9;</span>
                <div class="name">keyboard-9</div>
                <div class="code-name">&amp;#xe6a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6aa;</span>
                <div class="name">link</div>
                <div class="code-name">&amp;#xe6aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6ab;</span>
                <div class="name">layout</div>
                <div class="code-name">&amp;#xe6ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6ac;</span>
                <div class="name">fullscreen-shrink</div>
                <div class="code-name">&amp;#xe6ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6ad;</span>
                <div class="name">layers</div>
                <div class="code-name">&amp;#xe6ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6ae;</span>
                <div class="name">lock</div>
                <div class="code-name">&amp;#xe6ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6af;</span>
                <div class="name">fullscreen-expand</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6b0;</span>
                <div class="name">map</div>
                <div class="code-name">&amp;#xe6b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6b1;</span>
                <div class="name">meh</div>
                <div class="code-name">&amp;#xe6b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6b2;</span>
                <div class="name">menu</div>
                <div class="code-name">&amp;#xe6b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6b3;</span>
                <div class="name">loading</div>
                <div class="code-name">&amp;#xe6b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6b4;</span>
                <div class="name">help</div>
                <div class="code-name">&amp;#xe6b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6b5;</span>
                <div class="name">minus-circle</div>
                <div class="code-name">&amp;#xe6b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6b6;</span>
                <div class="name">modular</div>
                <div class="code-name">&amp;#xe6b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6b7;</span>
                <div class="name">notification</div>
                <div class="code-name">&amp;#xe6b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe952;</span>
                <div class="name">华为-copy</div>
                <div class="code-name">&amp;#xe952;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6b8;</span>
                <div class="name">mic</div>
                <div class="code-name">&amp;#xe6b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6b9;</span>
                <div class="name">more</div>
                <div class="code-name">&amp;#xe6b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6ba;</span>
                <div class="name">pad</div>
                <div class="code-name">&amp;#xe6ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6bb;</span>
                <div class="name">operation</div>
                <div class="code-name">&amp;#xe6bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6bc;</span>
                <div class="name">play</div>
                <div class="code-name">&amp;#xe6bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6bd;</span>
                <div class="name">print</div>
                <div class="code-name">&amp;#xe6bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6be;</span>
                <div class="name">mobile-phone</div>
                <div class="code-name">&amp;#xe6be;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6bf;</span>
                <div class="name">minus</div>
                <div class="code-name">&amp;#xe6bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6c0;</span>
                <div class="name">navigation</div>
                <div class="code-name">&amp;#xe6c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6c1;</span>
                <div class="name">pdf</div>
                <div class="code-name">&amp;#xe6c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6c2;</span>
                <div class="name">prompt</div>
                <div class="code-name">&amp;#xe6c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6c3;</span>
                <div class="name">move</div>
                <div class="code-name">&amp;#xe6c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6c4;</span>
                <div class="name">refresh</div>
                <div class="code-name">&amp;#xe6c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6c5;</span>
                <div class="name">run-up</div>
                <div class="code-name">&amp;#xe6c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6c6;</span>
                <div class="name">picture</div>
                <div class="code-name">&amp;#xe6c6;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6c7;</span>
                <div class="name">run-in</div>
                <div class="code-name">&amp;#xe6c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6c8;</span>
                <div class="name">pin</div>
                <div class="code-name">&amp;#xe6c8;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6c9;</span>
                <div class="name">save</div>
                <div class="code-name">&amp;#xe6c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6ca;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe6ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6cb;</span>
                <div class="name">share</div>
                <div class="code-name">&amp;#xe6cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6cc;</span>
                <div class="name">scanning</div>
                <div class="code-name">&amp;#xe6cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6cd;</span>
                <div class="name">security</div>
                <div class="code-name">&amp;#xe6cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6ce;</span>
                <div class="name">sign-out</div>
                <div class="code-name">&amp;#xe6ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6cf;</span>
                <div class="name">select</div>
                <div class="code-name">&amp;#xe6cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6d0;</span>
                <div class="name">stop</div>
                <div class="code-name">&amp;#xe6d0;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6d1;</span>
                <div class="name">success</div>
                <div class="code-name">&amp;#xe6d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6d2;</span>
                <div class="name">smile</div>
                <div class="code-name">&amp;#xe6d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6d3;</span>
                <div class="name">switch</div>
                <div class="code-name">&amp;#xe6d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6d4;</span>
                <div class="name">setting</div>
                <div class="code-name">&amp;#xe6d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6d5;</span>
                <div class="name">survey</div>
                <div class="code-name">&amp;#xe6d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6d6;</span>
                <div class="name">task</div>
                <div class="code-name">&amp;#xe6d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6d7;</span>
                <div class="name">skip</div>
                <div class="code-name">&amp;#xe6d7;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6d8;</span>
                <div class="name">text</div>
                <div class="code-name">&amp;#xe6d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6d9;</span>
                <div class="name">time</div>
                <div class="code-name">&amp;#xe6d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6da;</span>
                <div class="name">telephone-out</div>
                <div class="code-name">&amp;#xe6da;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6db;</span>
                <div class="name">toggle-left</div>
                <div class="code-name">&amp;#xe6db;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6dc;</span>
                <div class="name">toggle-right</div>
                <div class="code-name">&amp;#xe6dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6dd;</span>
                <div class="name">telephone</div>
                <div class="code-name">&amp;#xe6dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6de;</span>
                <div class="name">top</div>
                <div class="code-name">&amp;#xe6de;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6df;</span>
                <div class="name">unlock</div>
                <div class="code-name">&amp;#xe6df;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6e0;</span>
                <div class="name">user</div>
                <div class="code-name">&amp;#xe6e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6e1;</span>
                <div class="name">upload</div>
                <div class="code-name">&amp;#xe6e1;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6e2;</span>
                <div class="name">work</div>
                <div class="code-name">&amp;#xe6e2;</div>
              </li>
          
            <li class="dib">
              <span class="icon AppCommonIcons">&#xe6e3;</span>
                <div class="name">training</div>
                <div class="code-name">&amp;#xe6e3;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'AppCommonIcons';
  src: url('iconfont.woff2?t=1667893761767') format('woff2'),
       url('iconfont.woff?t=1667893761767') format('woff'),
       url('iconfont.ttf?t=1667893761767') format('truetype'),
       url('iconfont.svg?t=1667893761767#AppCommonIcons') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.AppCommonIcons {
  font-family: "AppCommonIcons" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="AppCommonIcons"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"AppCommonIcons" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon AppCommonIcons warning"></span>
            <div class="name">
              warning
            </div>
            <div class="code-name">.warning
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons zoom-in"></span>
            <div class="name">
              zoom-in
            </div>
            <div class="code-name">.zoom-in
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons zoom-out"></span>
            <div class="name">
              zoom-out
            </div>
            <div class="code-name">.zoom-out
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons add-bold"></span>
            <div class="name">
              add-bold
            </div>
            <div class="code-name">.add-bold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons arrow-left-bold"></span>
            <div class="name">
              arrow-left-bold
            </div>
            <div class="code-name">.arrow-left-bold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons arrow-up-bold"></span>
            <div class="name">
              arrow-up-bold
            </div>
            <div class="code-name">.arrow-up-bold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons close-bold"></span>
            <div class="name">
              close-bold
            </div>
            <div class="code-name">.close-bold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons arrow-down-bold"></span>
            <div class="name">
              arrow-down-bold
            </div>
            <div class="code-name">.arrow-down-bold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons minus-bold"></span>
            <div class="name">
              minus-bold
            </div>
            <div class="code-name">.minus-bold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons arrow-right-bold"></span>
            <div class="name">
              arrow-right-bold
            </div>
            <div class="code-name">.arrow-right-bold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons select-bold"></span>
            <div class="name">
              select-bold
            </div>
            <div class="code-name">.select-bold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons arrow-up-filling"></span>
            <div class="name">
              arrow-up-filling
            </div>
            <div class="code-name">.arrow-up-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons arrow-down-filling"></span>
            <div class="name">
              arrow-down-filling
            </div>
            <div class="code-name">.arrow-down-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons arrow-left-filling"></span>
            <div class="name">
              arrow-left-filling
            </div>
            <div class="code-name">.arrow-left-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons arrow-right-filling"></span>
            <div class="name">
              arrow-right-filling
            </div>
            <div class="code-name">.arrow-right-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons caps-unlock-filling"></span>
            <div class="name">
              caps-unlock-filling
            </div>
            <div class="code-name">.caps-unlock-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons comment-filling"></span>
            <div class="name">
              comment-filling
            </div>
            <div class="code-name">.comment-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons check-item-filling"></span>
            <div class="name">
              check-item-filling
            </div>
            <div class="code-name">.check-item-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons clock-filling"></span>
            <div class="name">
              clock-filling
            </div>
            <div class="code-name">.clock-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons delete-filling"></span>
            <div class="name">
              delete-filling
            </div>
            <div class="code-name">.delete-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons decline-filling"></span>
            <div class="name">
              decline-filling
            </div>
            <div class="code-name">.decline-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons dynamic-filling"></span>
            <div class="name">
              dynamic-filling
            </div>
            <div class="code-name">.dynamic-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons intermediate-filling"></span>
            <div class="name">
              intermediate-filling
            </div>
            <div class="code-name">.intermediate-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons favorite-filling"></span>
            <div class="name">
              favorite-filling
            </div>
            <div class="code-name">.favorite-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons layout-filling"></span>
            <div class="name">
              layout-filling
            </div>
            <div class="code-name">.layout-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons help-filling"></span>
            <div class="name">
              help-filling
            </div>
            <div class="code-name">.help-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons history-filling"></span>
            <div class="name">
              history-filling
            </div>
            <div class="code-name">.history-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons filter-filling"></span>
            <div class="name">
              filter-filling
            </div>
            <div class="code-name">.filter-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons file-common-filling"></span>
            <div class="name">
              file-common-filling
            </div>
            <div class="code-name">.file-common-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons news-filling"></span>
            <div class="name">
              news-filling
            </div>
            <div class="code-name">.news-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons edit-filling"></span>
            <div class="name">
              edit-filling
            </div>
            <div class="code-name">.edit-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons fullscreen-expand-filling"></span>
            <div class="name">
              fullscreen-expand-filling
            </div>
            <div class="code-name">.fullscreen-expand-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons smile-filling"></span>
            <div class="name">
              smile-filling
            </div>
            <div class="code-name">.smile-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons rise-filling"></span>
            <div class="name">
              rise-filling
            </div>
            <div class="code-name">.rise-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons picture-filling"></span>
            <div class="name">
              picture-filling
            </div>
            <div class="code-name">.picture-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons notification-filling"></span>
            <div class="name">
              notification-filling
            </div>
            <div class="code-name">.notification-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons user-filling"></span>
            <div class="name">
              user-filling
            </div>
            <div class="code-name">.user-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons setting-filling"></span>
            <div class="name">
              setting-filling
            </div>
            <div class="code-name">.setting-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons switch-filling"></span>
            <div class="name">
              switch-filling
            </div>
            <div class="code-name">.switch-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons work-filling"></span>
            <div class="name">
              work-filling
            </div>
            <div class="code-name">.work-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons task-filling"></span>
            <div class="name">
              task-filling
            </div>
            <div class="code-name">.task-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons success-filling"></span>
            <div class="name">
              success-filling
            </div>
            <div class="code-name">.success-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons warning-filling"></span>
            <div class="name">
              warning-filling
            </div>
            <div class="code-name">.warning-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons folder-filling"></span>
            <div class="name">
              folder-filling
            </div>
            <div class="code-name">.folder-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons map-filling"></span>
            <div class="name">
              map-filling
            </div>
            <div class="code-name">.map-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons prompt-filling"></span>
            <div class="name">
              prompt-filling
            </div>
            <div class="code-name">.prompt-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons meh-filling"></span>
            <div class="name">
              meh-filling
            </div>
            <div class="code-name">.meh-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons cry-filling"></span>
            <div class="name">
              cry-filling
            </div>
            <div class="code-name">.cry-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons top-filling"></span>
            <div class="name">
              top-filling
            </div>
            <div class="code-name">.top-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons home-filling"></span>
            <div class="name">
              home-filling
            </div>
            <div class="code-name">.home-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons sorting"></span>
            <div class="name">
              sorting
            </div>
            <div class="code-name">.sorting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons brand-huawei"></span>
            <div class="name">
              华为
            </div>
            <div class="code-name">.brand-huawei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons brand-vivo"></span>
            <div class="name">
              vivo
            </div>
            <div class="code-name">.brand-vivo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons brand-xiaomi"></span>
            <div class="name">
              小米
            </div>
            <div class="code-name">.brand-xiaomi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons apple"></span>
            <div class="name">
              apple
            </div>
            <div class="code-name">.apple
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons android"></span>
            <div class="name">
              Android
            </div>
            <div class="code-name">.android
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons brand-microsoft"></span>
            <div class="name">
              Microsoft
            </div>
            <div class="code-name">.brand-microsoft
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons brand-google-color"></span>
            <div class="name">
              Google
            </div>
            <div class="code-name">.brand-google-color
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons googlep-play"></span>
            <div class="name">
              GooglePlay
            </div>
            <div class="code-name">.googlep-play
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons safari"></span>
            <div class="name">
              Safari
            </div>
            <div class="code-name">.safari
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons wechat"></span>
            <div class="name">
              微信
            </div>
            <div class="code-name">.wechat
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons qqzone"></span>
            <div class="name">
              QQ空间
            </div>
            <div class="code-name">.qqzone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons weibo"></span>
            <div class="name">
              微博
            </div>
            <div class="code-name">.weibo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons wechat-moments"></span>
            <div class="name">
              朋友圈
            </div>
            <div class="code-name">.wechat-moments
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons qq"></span>
            <div class="name">
              QQ
            </div>
            <div class="code-name">.qq
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons wxpay"></span>
            <div class="name">
              微信支付
            </div>
            <div class="code-name">.wxpay
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons alipay"></span>
            <div class="name">
              支付宝
            </div>
            <div class="code-name">.alipay
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons applepay"></span>
            <div class="name">
              Apple pay
            </div>
            <div class="code-name">.applepay
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons paypal"></span>
            <div class="name">
              paypal
            </div>
            <div class="code-name">.paypal
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons yinlian"></span>
            <div class="name">
              银联
            </div>
            <div class="code-name">.yinlian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons yunshanfu"></span>
            <div class="name">
              云闪付
            </div>
            <div class="code-name">.yunshanfu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons facebook"></span>
            <div class="name">
              Facebook
            </div>
            <div class="code-name">.facebook
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons tumblr"></span>
            <div class="name">
              tumblr
            </div>
            <div class="code-name">.tumblr
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons twitter"></span>
            <div class="name">
              twitter
            </div>
            <div class="code-name">.twitter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons linkedin"></span>
            <div class="name">
              linkedin
            </div>
            <div class="code-name">.linkedin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons skype"></span>
            <div class="name">
              skype
            </div>
            <div class="code-name">.skype
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons line"></span>
            <div class="name">
              line
            </div>
            <div class="code-name">.line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons pinterest"></span>
            <div class="name">
              Pinterest
            </div>
            <div class="code-name">.pinterest
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons github"></span>
            <div class="name">
              github
            </div>
            <div class="code-name">.github
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons dingding"></span>
            <div class="name">
              钉钉
            </div>
            <div class="code-name">.dingding
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons FaceID"></span>
            <div class="name">
              Face ID
            </div>
            <div class="code-name">.FaceID
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons TouchID"></span>
            <div class="name">
              Touch ID
            </div>
            <div class="code-name">.TouchID
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons column-4"></span>
            <div class="name">
              column-4
            </div>
            <div class="code-name">.column-4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons add"></span>
            <div class="name">
              add
            </div>
            <div class="code-name">.add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons add-circle"></span>
            <div class="name">
              add-circle
            </div>
            <div class="code-name">.add-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons adjust"></span>
            <div class="name">
              adjust
            </div>
            <div class="code-name">.adjust
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons arrow-up-circle"></span>
            <div class="name">
              arrow-up-circle
            </div>
            <div class="code-name">.arrow-up-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons arrow-right-circle"></span>
            <div class="name">
              arrow-right-circle
            </div>
            <div class="code-name">.arrow-right-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons arrow-down"></span>
            <div class="name">
              arrow-down
            </div>
            <div class="code-name">.arrow-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons ashbin"></span>
            <div class="name">
              ashbin
            </div>
            <div class="code-name">.ashbin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons arrow-right"></span>
            <div class="name">
              arrow-right
            </div>
            <div class="code-name">.arrow-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons browse"></span>
            <div class="name">
              browse
            </div>
            <div class="code-name">.browse
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons bottom"></span>
            <div class="name">
              bottom
            </div>
            <div class="code-name">.bottom
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons back"></span>
            <div class="name">
              back
            </div>
            <div class="code-name">.back
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons bad"></span>
            <div class="name">
              bad
            </div>
            <div class="code-name">.bad
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons arrow-double-left"></span>
            <div class="name">
              arrow-double-left
            </div>
            <div class="code-name">.arrow-double-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons arrow-left-circle"></span>
            <div class="name">
              arrow-left-circle
            </div>
            <div class="code-name">.arrow-left-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons arrow-double-right"></span>
            <div class="name">
              arrow-double-right
            </div>
            <div class="code-name">.arrow-double-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons caps-lock"></span>
            <div class="name">
              caps-lock
            </div>
            <div class="code-name">.caps-lock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons camera"></span>
            <div class="name">
              camera
            </div>
            <div class="code-name">.camera
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons chart-bar"></span>
            <div class="name">
              chart-bar
            </div>
            <div class="code-name">.chart-bar
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons attachment"></span>
            <div class="name">
              attachment
            </div>
            <div class="code-name">.attachment
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons code"></span>
            <div class="name">
              code
            </div>
            <div class="code-name">.code
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons close"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons check-item"></span>
            <div class="name">
              check-item
            </div>
            <div class="code-name">.check-item
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons calendar"></span>
            <div class="name">
              calendar
            </div>
            <div class="code-name">.calendar
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons comment"></span>
            <div class="name">
              comment
            </div>
            <div class="code-name">.comment
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons column-vertical"></span>
            <div class="name">
              column-vertical
            </div>
            <div class="code-name">.column-vertical
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons column-horizontal"></span>
            <div class="name">
              column-horizontal
            </div>
            <div class="code-name">.column-horizontal
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons complete"></span>
            <div class="name">
              complete
            </div>
            <div class="code-name">.complete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons chart-pie"></span>
            <div class="name">
              chart-pie
            </div>
            <div class="code-name">.chart-pie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons cry"></span>
            <div class="name">
              cry
            </div>
            <div class="code-name">.cry
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons customer-service"></span>
            <div class="name">
              customer-service
            </div>
            <div class="code-name">.customer-service
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons delete"></span>
            <div class="name">
              delete
            </div>
            <div class="code-name">.delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons direction-down"></span>
            <div class="name">
              direction-down
            </div>
            <div class="code-name">.direction-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons copy"></span>
            <div class="name">
              copy
            </div>
            <div class="code-name">.copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons cut"></span>
            <div class="name">
              cut
            </div>
            <div class="code-name">.cut
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons data-view"></span>
            <div class="name">
              data-view
            </div>
            <div class="code-name">.data-view
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons direction-down-circle"></span>
            <div class="name">
              direction-down-circle
            </div>
            <div class="code-name">.direction-down-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons direction-right"></span>
            <div class="name">
              direction-right
            </div>
            <div class="code-name">.direction-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons direction-up"></span>
            <div class="name">
              direction-up
            </div>
            <div class="code-name">.direction-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons discount"></span>
            <div class="name">
              discount
            </div>
            <div class="code-name">.discount
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons direction-left"></span>
            <div class="name">
              direction-left
            </div>
            <div class="code-name">.direction-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons download"></span>
            <div class="name">
              download
            </div>
            <div class="code-name">.download
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons electronics"></span>
            <div class="name">
              electronics
            </div>
            <div class="code-name">.electronics
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons drag"></span>
            <div class="name">
              drag
            </div>
            <div class="code-name">.drag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons elipsis"></span>
            <div class="name">
              elipsis
            </div>
            <div class="code-name">.elipsis
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons export"></span>
            <div class="name">
              export
            </div>
            <div class="code-name">.export
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons explain"></span>
            <div class="name">
              explain
            </div>
            <div class="code-name">.explain
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons edit"></span>
            <div class="name">
              edit
            </div>
            <div class="code-name">.edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons eye-close"></span>
            <div class="name">
              eye-close
            </div>
            <div class="code-name">.eye-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons email"></span>
            <div class="name">
              email
            </div>
            <div class="code-name">.email
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons error"></span>
            <div class="name">
              error
            </div>
            <div class="code-name">.error
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons favorite"></span>
            <div class="name">
              favorite
            </div>
            <div class="code-name">.favorite
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons file-common"></span>
            <div class="name">
              file-common
            </div>
            <div class="code-name">.file-common
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons file-delete"></span>
            <div class="name">
              file-delete
            </div>
            <div class="code-name">.file-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons file-add"></span>
            <div class="name">
              file-add
            </div>
            <div class="code-name">.file-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons film"></span>
            <div class="name">
              film
            </div>
            <div class="code-name">.film
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons fabulous"></span>
            <div class="name">
              fabulous
            </div>
            <div class="code-name">.fabulous
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons file"></span>
            <div class="name">
              file
            </div>
            <div class="code-name">.file
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons folder-close"></span>
            <div class="name">
              folder-close
            </div>
            <div class="code-name">.folder-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons filter"></span>
            <div class="name">
              filter
            </div>
            <div class="code-name">.filter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons good"></span>
            <div class="name">
              good
            </div>
            <div class="code-name">.good
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons hide"></span>
            <div class="name">
              hide
            </div>
            <div class="code-name">.hide
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons home"></span>
            <div class="name">
              home
            </div>
            <div class="code-name">.home
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons history"></span>
            <div class="name">
              history
            </div>
            <div class="code-name">.history
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons file-open"></span>
            <div class="name">
              file-open
            </div>
            <div class="code-name">.file-open
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons forward"></span>
            <div class="name">
              forward
            </div>
            <div class="code-name">.forward
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons import"></span>
            <div class="name">
              import
            </div>
            <div class="code-name">.import
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons image-text"></span>
            <div class="name">
              image-text
            </div>
            <div class="code-name">.image-text
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons keyboard-26"></span>
            <div class="name">
              keyboard-26
            </div>
            <div class="code-name">.keyboard-26
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons keyboard-9"></span>
            <div class="name">
              keyboard-9
            </div>
            <div class="code-name">.keyboard-9
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons link"></span>
            <div class="name">
              link
            </div>
            <div class="code-name">.link
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons layout"></span>
            <div class="name">
              layout
            </div>
            <div class="code-name">.layout
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons fullscreen-shrink"></span>
            <div class="name">
              fullscreen-shrink
            </div>
            <div class="code-name">.fullscreen-shrink
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons layers"></span>
            <div class="name">
              layers
            </div>
            <div class="code-name">.layers
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons lock"></span>
            <div class="name">
              lock
            </div>
            <div class="code-name">.lock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons fullscreen-expand"></span>
            <div class="name">
              fullscreen-expand
            </div>
            <div class="code-name">.fullscreen-expand
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons map"></span>
            <div class="name">
              map
            </div>
            <div class="code-name">.map
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons meh"></span>
            <div class="name">
              meh
            </div>
            <div class="code-name">.meh
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons menu"></span>
            <div class="name">
              menu
            </div>
            <div class="code-name">.menu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons loading"></span>
            <div class="name">
              loading
            </div>
            <div class="code-name">.loading
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons help"></span>
            <div class="name">
              help
            </div>
            <div class="code-name">.help
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons minus-circle"></span>
            <div class="name">
              minus-circle
            </div>
            <div class="code-name">.minus-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons modular"></span>
            <div class="name">
              modular
            </div>
            <div class="code-name">.modular
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons notification"></span>
            <div class="name">
              notification
            </div>
            <div class="code-name">.notification
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons huawei-copy"></span>
            <div class="name">
              华为-copy
            </div>
            <div class="code-name">.huawei-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons mic"></span>
            <div class="name">
              mic
            </div>
            <div class="code-name">.mic
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons more"></span>
            <div class="name">
              more
            </div>
            <div class="code-name">.more
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons pad"></span>
            <div class="name">
              pad
            </div>
            <div class="code-name">.pad
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons operation"></span>
            <div class="name">
              operation
            </div>
            <div class="code-name">.operation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons play"></span>
            <div class="name">
              play
            </div>
            <div class="code-name">.play
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons print"></span>
            <div class="name">
              print
            </div>
            <div class="code-name">.print
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons mobile-phone"></span>
            <div class="name">
              mobile-phone
            </div>
            <div class="code-name">.mobile-phone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons minus"></span>
            <div class="name">
              minus
            </div>
            <div class="code-name">.minus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons navigation"></span>
            <div class="name">
              navigation
            </div>
            <div class="code-name">.navigation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons pdf"></span>
            <div class="name">
              pdf
            </div>
            <div class="code-name">.pdf
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons prompt"></span>
            <div class="name">
              prompt
            </div>
            <div class="code-name">.prompt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons move"></span>
            <div class="name">
              move
            </div>
            <div class="code-name">.move
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons refresh"></span>
            <div class="name">
              refresh
            </div>
            <div class="code-name">.refresh
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons run-up"></span>
            <div class="name">
              run-up
            </div>
            <div class="code-name">.run-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons picture"></span>
            <div class="name">
              picture
            </div>
            <div class="code-name">.picture
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons run-in"></span>
            <div class="name">
              run-in
            </div>
            <div class="code-name">.run-in
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons pin"></span>
            <div class="name">
              pin
            </div>
            <div class="code-name">.pin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons save"></span>
            <div class="name">
              save
            </div>
            <div class="code-name">.save
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons search"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons share"></span>
            <div class="name">
              share
            </div>
            <div class="code-name">.share
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons scanning"></span>
            <div class="name">
              scanning
            </div>
            <div class="code-name">.scanning
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons security"></span>
            <div class="name">
              security
            </div>
            <div class="code-name">.security
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons sign-out"></span>
            <div class="name">
              sign-out
            </div>
            <div class="code-name">.sign-out
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons select"></span>
            <div class="name">
              select
            </div>
            <div class="code-name">.select
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons stop"></span>
            <div class="name">
              stop
            </div>
            <div class="code-name">.stop
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons success"></span>
            <div class="name">
              success
            </div>
            <div class="code-name">.success
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons smile"></span>
            <div class="name">
              smile
            </div>
            <div class="code-name">.smile
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons switch"></span>
            <div class="name">
              switch
            </div>
            <div class="code-name">.switch
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons setting"></span>
            <div class="name">
              setting
            </div>
            <div class="code-name">.setting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons survey"></span>
            <div class="name">
              survey
            </div>
            <div class="code-name">.survey
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons task"></span>
            <div class="name">
              task
            </div>
            <div class="code-name">.task
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons skip"></span>
            <div class="name">
              skip
            </div>
            <div class="code-name">.skip
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons text"></span>
            <div class="name">
              text
            </div>
            <div class="code-name">.text
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons time"></span>
            <div class="name">
              time
            </div>
            <div class="code-name">.time
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons telephone-out"></span>
            <div class="name">
              telephone-out
            </div>
            <div class="code-name">.telephone-out
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons toggle-left"></span>
            <div class="name">
              toggle-left
            </div>
            <div class="code-name">.toggle-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons toggle-right"></span>
            <div class="name">
              toggle-right
            </div>
            <div class="code-name">.toggle-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons telephone"></span>
            <div class="name">
              telephone
            </div>
            <div class="code-name">.telephone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons top"></span>
            <div class="name">
              top
            </div>
            <div class="code-name">.top
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons unlock"></span>
            <div class="name">
              unlock
            </div>
            <div class="code-name">.unlock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons user"></span>
            <div class="name">
              user
            </div>
            <div class="code-name">.user
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons upload"></span>
            <div class="name">
              upload
            </div>
            <div class="code-name">.upload
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons work"></span>
            <div class="name">
              work
            </div>
            <div class="code-name">.work
            </div>
          </li>
          
          <li class="dib">
            <span class="icon AppCommonIcons training"></span>
            <div class="name">
              training
            </div>
            <div class="code-name">.training
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="AppCommonIcons xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            AppCommonIcons" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#warning"></use>
                </svg>
                <div class="name">warning</div>
                <div class="code-name">#warning</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zoom-in"></use>
                </svg>
                <div class="name">zoom-in</div>
                <div class="code-name">#zoom-in</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zoom-out"></use>
                </svg>
                <div class="name">zoom-out</div>
                <div class="code-name">#zoom-out</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#add-bold"></use>
                </svg>
                <div class="name">add-bold</div>
                <div class="code-name">#add-bold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#arrow-left-bold"></use>
                </svg>
                <div class="name">arrow-left-bold</div>
                <div class="code-name">#arrow-left-bold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#arrow-up-bold"></use>
                </svg>
                <div class="name">arrow-up-bold</div>
                <div class="code-name">#arrow-up-bold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#close-bold"></use>
                </svg>
                <div class="name">close-bold</div>
                <div class="code-name">#close-bold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#arrow-down-bold"></use>
                </svg>
                <div class="name">arrow-down-bold</div>
                <div class="code-name">#arrow-down-bold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#minus-bold"></use>
                </svg>
                <div class="name">minus-bold</div>
                <div class="code-name">#minus-bold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#arrow-right-bold"></use>
                </svg>
                <div class="name">arrow-right-bold</div>
                <div class="code-name">#arrow-right-bold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#select-bold"></use>
                </svg>
                <div class="name">select-bold</div>
                <div class="code-name">#select-bold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#arrow-up-filling"></use>
                </svg>
                <div class="name">arrow-up-filling</div>
                <div class="code-name">#arrow-up-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#arrow-down-filling"></use>
                </svg>
                <div class="name">arrow-down-filling</div>
                <div class="code-name">#arrow-down-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#arrow-left-filling"></use>
                </svg>
                <div class="name">arrow-left-filling</div>
                <div class="code-name">#arrow-left-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#arrow-right-filling"></use>
                </svg>
                <div class="name">arrow-right-filling</div>
                <div class="code-name">#arrow-right-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#caps-unlock-filling"></use>
                </svg>
                <div class="name">caps-unlock-filling</div>
                <div class="code-name">#caps-unlock-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#comment-filling"></use>
                </svg>
                <div class="name">comment-filling</div>
                <div class="code-name">#comment-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#check-item-filling"></use>
                </svg>
                <div class="name">check-item-filling</div>
                <div class="code-name">#check-item-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#clock-filling"></use>
                </svg>
                <div class="name">clock-filling</div>
                <div class="code-name">#clock-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#delete-filling"></use>
                </svg>
                <div class="name">delete-filling</div>
                <div class="code-name">#delete-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#decline-filling"></use>
                </svg>
                <div class="name">decline-filling</div>
                <div class="code-name">#decline-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dynamic-filling"></use>
                </svg>
                <div class="name">dynamic-filling</div>
                <div class="code-name">#dynamic-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#intermediate-filling"></use>
                </svg>
                <div class="name">intermediate-filling</div>
                <div class="code-name">#intermediate-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#favorite-filling"></use>
                </svg>
                <div class="name">favorite-filling</div>
                <div class="code-name">#favorite-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layout-filling"></use>
                </svg>
                <div class="name">layout-filling</div>
                <div class="code-name">#layout-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#help-filling"></use>
                </svg>
                <div class="name">help-filling</div>
                <div class="code-name">#help-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#history-filling"></use>
                </svg>
                <div class="name">history-filling</div>
                <div class="code-name">#history-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#filter-filling"></use>
                </svg>
                <div class="name">filter-filling</div>
                <div class="code-name">#filter-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#file-common-filling"></use>
                </svg>
                <div class="name">file-common-filling</div>
                <div class="code-name">#file-common-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#news-filling"></use>
                </svg>
                <div class="name">news-filling</div>
                <div class="code-name">#news-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#edit-filling"></use>
                </svg>
                <div class="name">edit-filling</div>
                <div class="code-name">#edit-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fullscreen-expand-filling"></use>
                </svg>
                <div class="name">fullscreen-expand-filling</div>
                <div class="code-name">#fullscreen-expand-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#smile-filling"></use>
                </svg>
                <div class="name">smile-filling</div>
                <div class="code-name">#smile-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#rise-filling"></use>
                </svg>
                <div class="name">rise-filling</div>
                <div class="code-name">#rise-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#picture-filling"></use>
                </svg>
                <div class="name">picture-filling</div>
                <div class="code-name">#picture-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#notification-filling"></use>
                </svg>
                <div class="name">notification-filling</div>
                <div class="code-name">#notification-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#user-filling"></use>
                </svg>
                <div class="name">user-filling</div>
                <div class="code-name">#user-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#setting-filling"></use>
                </svg>
                <div class="name">setting-filling</div>
                <div class="code-name">#setting-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#switch-filling"></use>
                </svg>
                <div class="name">switch-filling</div>
                <div class="code-name">#switch-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#work-filling"></use>
                </svg>
                <div class="name">work-filling</div>
                <div class="code-name">#work-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#task-filling"></use>
                </svg>
                <div class="name">task-filling</div>
                <div class="code-name">#task-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#success-filling"></use>
                </svg>
                <div class="name">success-filling</div>
                <div class="code-name">#success-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#warning-filling"></use>
                </svg>
                <div class="name">warning-filling</div>
                <div class="code-name">#warning-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#folder-filling"></use>
                </svg>
                <div class="name">folder-filling</div>
                <div class="code-name">#folder-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#map-filling"></use>
                </svg>
                <div class="name">map-filling</div>
                <div class="code-name">#map-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#prompt-filling"></use>
                </svg>
                <div class="name">prompt-filling</div>
                <div class="code-name">#prompt-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#meh-filling"></use>
                </svg>
                <div class="name">meh-filling</div>
                <div class="code-name">#meh-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cry-filling"></use>
                </svg>
                <div class="name">cry-filling</div>
                <div class="code-name">#cry-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#top-filling"></use>
                </svg>
                <div class="name">top-filling</div>
                <div class="code-name">#top-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#home-filling"></use>
                </svg>
                <div class="name">home-filling</div>
                <div class="code-name">#home-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#sorting"></use>
                </svg>
                <div class="name">sorting</div>
                <div class="code-name">#sorting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#brand-huawei"></use>
                </svg>
                <div class="name">华为</div>
                <div class="code-name">#brand-huawei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#brand-vivo"></use>
                </svg>
                <div class="name">vivo</div>
                <div class="code-name">#brand-vivo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#brand-xiaomi"></use>
                </svg>
                <div class="name">小米</div>
                <div class="code-name">#brand-xiaomi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#apple"></use>
                </svg>
                <div class="name">apple</div>
                <div class="code-name">#apple</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#android"></use>
                </svg>
                <div class="name">Android</div>
                <div class="code-name">#android</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#brand-microsoft"></use>
                </svg>
                <div class="name">Microsoft</div>
                <div class="code-name">#brand-microsoft</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#brand-google-color"></use>
                </svg>
                <div class="name">Google</div>
                <div class="code-name">#brand-google-color</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#googlep-play"></use>
                </svg>
                <div class="name">GooglePlay</div>
                <div class="code-name">#googlep-play</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#safari"></use>
                </svg>
                <div class="name">Safari</div>
                <div class="code-name">#safari</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#wechat"></use>
                </svg>
                <div class="name">微信</div>
                <div class="code-name">#wechat</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#qqzone"></use>
                </svg>
                <div class="name">QQ空间</div>
                <div class="code-name">#qqzone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#weibo"></use>
                </svg>
                <div class="name">微博</div>
                <div class="code-name">#weibo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#wechat-moments"></use>
                </svg>
                <div class="name">朋友圈</div>
                <div class="code-name">#wechat-moments</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#qq"></use>
                </svg>
                <div class="name">QQ</div>
                <div class="code-name">#qq</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#wxpay"></use>
                </svg>
                <div class="name">微信支付</div>
                <div class="code-name">#wxpay</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#alipay"></use>
                </svg>
                <div class="name">支付宝</div>
                <div class="code-name">#alipay</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#applepay"></use>
                </svg>
                <div class="name">Apple pay</div>
                <div class="code-name">#applepay</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#paypal"></use>
                </svg>
                <div class="name">paypal</div>
                <div class="code-name">#paypal</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#yinlian"></use>
                </svg>
                <div class="name">银联</div>
                <div class="code-name">#yinlian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#yunshanfu"></use>
                </svg>
                <div class="name">云闪付</div>
                <div class="code-name">#yunshanfu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#facebook"></use>
                </svg>
                <div class="name">Facebook</div>
                <div class="code-name">#facebook</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#tumblr"></use>
                </svg>
                <div class="name">tumblr</div>
                <div class="code-name">#tumblr</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#twitter"></use>
                </svg>
                <div class="name">twitter</div>
                <div class="code-name">#twitter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#linkedin"></use>
                </svg>
                <div class="name">linkedin</div>
                <div class="code-name">#linkedin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#skype"></use>
                </svg>
                <div class="name">skype</div>
                <div class="code-name">#skype</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#line"></use>
                </svg>
                <div class="name">line</div>
                <div class="code-name">#line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#pinterest"></use>
                </svg>
                <div class="name">Pinterest</div>
                <div class="code-name">#pinterest</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#github"></use>
                </svg>
                <div class="name">github</div>
                <div class="code-name">#github</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dingding"></use>
                </svg>
                <div class="name">钉钉</div>
                <div class="code-name">#dingding</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#FaceID"></use>
                </svg>
                <div class="name">Face ID</div>
                <div class="code-name">#FaceID</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#TouchID"></use>
                </svg>
                <div class="name">Touch ID</div>
                <div class="code-name">#TouchID</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#column-4"></use>
                </svg>
                <div class="name">column-4</div>
                <div class="code-name">#column-4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#add"></use>
                </svg>
                <div class="name">add</div>
                <div class="code-name">#add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#add-circle"></use>
                </svg>
                <div class="name">add-circle</div>
                <div class="code-name">#add-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#adjust"></use>
                </svg>
                <div class="name">adjust</div>
                <div class="code-name">#adjust</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#arrow-up-circle"></use>
                </svg>
                <div class="name">arrow-up-circle</div>
                <div class="code-name">#arrow-up-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#arrow-right-circle"></use>
                </svg>
                <div class="name">arrow-right-circle</div>
                <div class="code-name">#arrow-right-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#arrow-down"></use>
                </svg>
                <div class="name">arrow-down</div>
                <div class="code-name">#arrow-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ashbin"></use>
                </svg>
                <div class="name">ashbin</div>
                <div class="code-name">#ashbin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#arrow-right"></use>
                </svg>
                <div class="name">arrow-right</div>
                <div class="code-name">#arrow-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#browse"></use>
                </svg>
                <div class="name">browse</div>
                <div class="code-name">#browse</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bottom"></use>
                </svg>
                <div class="name">bottom</div>
                <div class="code-name">#bottom</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#back"></use>
                </svg>
                <div class="name">back</div>
                <div class="code-name">#back</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bad"></use>
                </svg>
                <div class="name">bad</div>
                <div class="code-name">#bad</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#arrow-double-left"></use>
                </svg>
                <div class="name">arrow-double-left</div>
                <div class="code-name">#arrow-double-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#arrow-left-circle"></use>
                </svg>
                <div class="name">arrow-left-circle</div>
                <div class="code-name">#arrow-left-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#arrow-double-right"></use>
                </svg>
                <div class="name">arrow-double-right</div>
                <div class="code-name">#arrow-double-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#caps-lock"></use>
                </svg>
                <div class="name">caps-lock</div>
                <div class="code-name">#caps-lock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#camera"></use>
                </svg>
                <div class="name">camera</div>
                <div class="code-name">#camera</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#chart-bar"></use>
                </svg>
                <div class="name">chart-bar</div>
                <div class="code-name">#chart-bar</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#attachment"></use>
                </svg>
                <div class="name">attachment</div>
                <div class="code-name">#attachment</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#code"></use>
                </svg>
                <div class="name">code</div>
                <div class="code-name">#code</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#close"></use>
                </svg>
                <div class="name">close</div>
                <div class="code-name">#close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#check-item"></use>
                </svg>
                <div class="name">check-item</div>
                <div class="code-name">#check-item</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#calendar"></use>
                </svg>
                <div class="name">calendar</div>
                <div class="code-name">#calendar</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#comment"></use>
                </svg>
                <div class="name">comment</div>
                <div class="code-name">#comment</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#column-vertical"></use>
                </svg>
                <div class="name">column-vertical</div>
                <div class="code-name">#column-vertical</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#column-horizontal"></use>
                </svg>
                <div class="name">column-horizontal</div>
                <div class="code-name">#column-horizontal</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#complete"></use>
                </svg>
                <div class="name">complete</div>
                <div class="code-name">#complete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#chart-pie"></use>
                </svg>
                <div class="name">chart-pie</div>
                <div class="code-name">#chart-pie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cry"></use>
                </svg>
                <div class="name">cry</div>
                <div class="code-name">#cry</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#customer-service"></use>
                </svg>
                <div class="name">customer-service</div>
                <div class="code-name">#customer-service</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#delete"></use>
                </svg>
                <div class="name">delete</div>
                <div class="code-name">#delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#direction-down"></use>
                </svg>
                <div class="name">direction-down</div>
                <div class="code-name">#direction-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#copy"></use>
                </svg>
                <div class="name">copy</div>
                <div class="code-name">#copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cut"></use>
                </svg>
                <div class="name">cut</div>
                <div class="code-name">#cut</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#data-view"></use>
                </svg>
                <div class="name">data-view</div>
                <div class="code-name">#data-view</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#direction-down-circle"></use>
                </svg>
                <div class="name">direction-down-circle</div>
                <div class="code-name">#direction-down-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#direction-right"></use>
                </svg>
                <div class="name">direction-right</div>
                <div class="code-name">#direction-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#direction-up"></use>
                </svg>
                <div class="name">direction-up</div>
                <div class="code-name">#direction-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#discount"></use>
                </svg>
                <div class="name">discount</div>
                <div class="code-name">#discount</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#direction-left"></use>
                </svg>
                <div class="name">direction-left</div>
                <div class="code-name">#direction-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#download"></use>
                </svg>
                <div class="name">download</div>
                <div class="code-name">#download</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#electronics"></use>
                </svg>
                <div class="name">electronics</div>
                <div class="code-name">#electronics</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#drag"></use>
                </svg>
                <div class="name">drag</div>
                <div class="code-name">#drag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#elipsis"></use>
                </svg>
                <div class="name">elipsis</div>
                <div class="code-name">#elipsis</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#export"></use>
                </svg>
                <div class="name">export</div>
                <div class="code-name">#export</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#explain"></use>
                </svg>
                <div class="name">explain</div>
                <div class="code-name">#explain</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#edit"></use>
                </svg>
                <div class="name">edit</div>
                <div class="code-name">#edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#eye-close"></use>
                </svg>
                <div class="name">eye-close</div>
                <div class="code-name">#eye-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#email"></use>
                </svg>
                <div class="name">email</div>
                <div class="code-name">#email</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#error"></use>
                </svg>
                <div class="name">error</div>
                <div class="code-name">#error</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#favorite"></use>
                </svg>
                <div class="name">favorite</div>
                <div class="code-name">#favorite</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#file-common"></use>
                </svg>
                <div class="name">file-common</div>
                <div class="code-name">#file-common</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#file-delete"></use>
                </svg>
                <div class="name">file-delete</div>
                <div class="code-name">#file-delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#file-add"></use>
                </svg>
                <div class="name">file-add</div>
                <div class="code-name">#file-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#film"></use>
                </svg>
                <div class="name">film</div>
                <div class="code-name">#film</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fabulous"></use>
                </svg>
                <div class="name">fabulous</div>
                <div class="code-name">#fabulous</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#file"></use>
                </svg>
                <div class="name">file</div>
                <div class="code-name">#file</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#folder-close"></use>
                </svg>
                <div class="name">folder-close</div>
                <div class="code-name">#folder-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#filter"></use>
                </svg>
                <div class="name">filter</div>
                <div class="code-name">#filter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#good"></use>
                </svg>
                <div class="name">good</div>
                <div class="code-name">#good</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hide"></use>
                </svg>
                <div class="name">hide</div>
                <div class="code-name">#hide</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#home"></use>
                </svg>
                <div class="name">home</div>
                <div class="code-name">#home</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#history"></use>
                </svg>
                <div class="name">history</div>
                <div class="code-name">#history</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#file-open"></use>
                </svg>
                <div class="name">file-open</div>
                <div class="code-name">#file-open</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#forward"></use>
                </svg>
                <div class="name">forward</div>
                <div class="code-name">#forward</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#import"></use>
                </svg>
                <div class="name">import</div>
                <div class="code-name">#import</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#image-text"></use>
                </svg>
                <div class="name">image-text</div>
                <div class="code-name">#image-text</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#keyboard-26"></use>
                </svg>
                <div class="name">keyboard-26</div>
                <div class="code-name">#keyboard-26</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#keyboard-9"></use>
                </svg>
                <div class="name">keyboard-9</div>
                <div class="code-name">#keyboard-9</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#link"></use>
                </svg>
                <div class="name">link</div>
                <div class="code-name">#link</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layout"></use>
                </svg>
                <div class="name">layout</div>
                <div class="code-name">#layout</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fullscreen-shrink"></use>
                </svg>
                <div class="name">fullscreen-shrink</div>
                <div class="code-name">#fullscreen-shrink</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layers"></use>
                </svg>
                <div class="name">layers</div>
                <div class="code-name">#layers</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#lock"></use>
                </svg>
                <div class="name">lock</div>
                <div class="code-name">#lock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fullscreen-expand"></use>
                </svg>
                <div class="name">fullscreen-expand</div>
                <div class="code-name">#fullscreen-expand</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#map"></use>
                </svg>
                <div class="name">map</div>
                <div class="code-name">#map</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#meh"></use>
                </svg>
                <div class="name">meh</div>
                <div class="code-name">#meh</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#menu"></use>
                </svg>
                <div class="name">menu</div>
                <div class="code-name">#menu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#loading"></use>
                </svg>
                <div class="name">loading</div>
                <div class="code-name">#loading</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#help"></use>
                </svg>
                <div class="name">help</div>
                <div class="code-name">#help</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#minus-circle"></use>
                </svg>
                <div class="name">minus-circle</div>
                <div class="code-name">#minus-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#modular"></use>
                </svg>
                <div class="name">modular</div>
                <div class="code-name">#modular</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#notification"></use>
                </svg>
                <div class="name">notification</div>
                <div class="code-name">#notification</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#huawei-copy"></use>
                </svg>
                <div class="name">华为-copy</div>
                <div class="code-name">#huawei-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#mic"></use>
                </svg>
                <div class="name">mic</div>
                <div class="code-name">#mic</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#more"></use>
                </svg>
                <div class="name">more</div>
                <div class="code-name">#more</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#pad"></use>
                </svg>
                <div class="name">pad</div>
                <div class="code-name">#pad</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#operation"></use>
                </svg>
                <div class="name">operation</div>
                <div class="code-name">#operation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#play"></use>
                </svg>
                <div class="name">play</div>
                <div class="code-name">#play</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#print"></use>
                </svg>
                <div class="name">print</div>
                <div class="code-name">#print</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#mobile-phone"></use>
                </svg>
                <div class="name">mobile-phone</div>
                <div class="code-name">#mobile-phone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#minus"></use>
                </svg>
                <div class="name">minus</div>
                <div class="code-name">#minus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#navigation"></use>
                </svg>
                <div class="name">navigation</div>
                <div class="code-name">#navigation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#pdf"></use>
                </svg>
                <div class="name">pdf</div>
                <div class="code-name">#pdf</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#prompt"></use>
                </svg>
                <div class="name">prompt</div>
                <div class="code-name">#prompt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#move"></use>
                </svg>
                <div class="name">move</div>
                <div class="code-name">#move</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#refresh"></use>
                </svg>
                <div class="name">refresh</div>
                <div class="code-name">#refresh</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#run-up"></use>
                </svg>
                <div class="name">run-up</div>
                <div class="code-name">#run-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#picture"></use>
                </svg>
                <div class="name">picture</div>
                <div class="code-name">#picture</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#run-in"></use>
                </svg>
                <div class="name">run-in</div>
                <div class="code-name">#run-in</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#pin"></use>
                </svg>
                <div class="name">pin</div>
                <div class="code-name">#pin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#save"></use>
                </svg>
                <div class="name">save</div>
                <div class="code-name">#save</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#search"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#share"></use>
                </svg>
                <div class="name">share</div>
                <div class="code-name">#share</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#scanning"></use>
                </svg>
                <div class="name">scanning</div>
                <div class="code-name">#scanning</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#security"></use>
                </svg>
                <div class="name">security</div>
                <div class="code-name">#security</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#sign-out"></use>
                </svg>
                <div class="name">sign-out</div>
                <div class="code-name">#sign-out</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#select"></use>
                </svg>
                <div class="name">select</div>
                <div class="code-name">#select</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#stop"></use>
                </svg>
                <div class="name">stop</div>
                <div class="code-name">#stop</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#success"></use>
                </svg>
                <div class="name">success</div>
                <div class="code-name">#success</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#smile"></use>
                </svg>
                <div class="name">smile</div>
                <div class="code-name">#smile</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#switch"></use>
                </svg>
                <div class="name">switch</div>
                <div class="code-name">#switch</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#setting"></use>
                </svg>
                <div class="name">setting</div>
                <div class="code-name">#setting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#survey"></use>
                </svg>
                <div class="name">survey</div>
                <div class="code-name">#survey</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#task"></use>
                </svg>
                <div class="name">task</div>
                <div class="code-name">#task</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#skip"></use>
                </svg>
                <div class="name">skip</div>
                <div class="code-name">#skip</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#text"></use>
                </svg>
                <div class="name">text</div>
                <div class="code-name">#text</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#time"></use>
                </svg>
                <div class="name">time</div>
                <div class="code-name">#time</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#telephone-out"></use>
                </svg>
                <div class="name">telephone-out</div>
                <div class="code-name">#telephone-out</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#toggle-left"></use>
                </svg>
                <div class="name">toggle-left</div>
                <div class="code-name">#toggle-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#toggle-right"></use>
                </svg>
                <div class="name">toggle-right</div>
                <div class="code-name">#toggle-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#telephone"></use>
                </svg>
                <div class="name">telephone</div>
                <div class="code-name">#telephone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#top"></use>
                </svg>
                <div class="name">top</div>
                <div class="code-name">#top</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#unlock"></use>
                </svg>
                <div class="name">unlock</div>
                <div class="code-name">#unlock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#user"></use>
                </svg>
                <div class="name">user</div>
                <div class="code-name">#user</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#upload"></use>
                </svg>
                <div class="name">upload</div>
                <div class="code-name">#upload</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#work"></use>
                </svg>
                <div class="name">work</div>
                <div class="code-name">#work</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#training"></use>
                </svg>
                <div class="name">training</div>
                <div class="code-name">#training</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
